<template>
  <el-dialog title="分配角色" :visible.sync="visible">
    <el-checkbox-group v-model="roles">
      <!-- 选项 -->
      <!-- :label="item.id"是选中后的结果, -->
      <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">{{
        item.name
      }}</el-checkbox>
    </el-checkbox-group>
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button @click="submitFrom" type="primary" size="small"
          >确定</el-button
        >
        <el-button size="small" @click="visible = false">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
// getRoles，获取角色列表 7月16号也用过
import { getRoles } from '../../../api/setting.js'
// 获取员工(用户)基本信息接口，因为需要根据userId先拿获取用户信息，然后再获取角色列表
import { getMoreInfo } from '../../../api/user.js'
// 7月22号------------------------7月22号------------------------
// 分配角色接口
import { assignRoles } from '../../../api/employees.js'
export default {
  props: {},
  data () {
    return {
      roleList: [], // 角色列表,系统管理员,人事经理,人事专员,薪资员工,员工...
      roles: [], // 选中的角色id
      userInfo: {}, // 用户信息
      visible: false // 是否显示
    }
  },
  methods: {
    // 7月22号------------------------7月22号------------------------
    // 点击确定提交事件(分配角色接口)做完这一步后,用户和角色,就有关联了
    // 用户和>>>角色关联 然后角色在和>>>权限关联-----------------------------------
    // 然后权限关联是在,setting\index.vue,
    async submitFrom () {
      await assignRoles({
        // 获取到的用户所有,信息保存早data里面的userInfo,所有userInfo里面就有用户的id
        id: this.userInfo.id, // 用户id(就是需要给哪一个用户来分配角色,其实就是添加其他的权限)
        // 这个就是当前用户勾选的其他角色(权限),是用过标签里面el-checkbox-group v-model="roles" v-m绑定了选中的值
        roleIds: this.roles // 角色的id数组,因为一个用户可以有多个角色,就是多个权限,
      })
      this.$message.success('角色分配成功')
      this.visible = false
    },
    // 自定义的方法,获取用户数据的
    // userId是接收到employees\index.vue父组件传递过来的id (用这个id去获取对应的数据)
    async lin (userId) {
      // console.log('userId', userId)
      // 这种简写是错误的,因为服务器返回的数据是放在rows里面的,所需要点出rows才可以
      // 这种写法最好就少用，少用
      //  his.roleList = await getRoles({ page: 1, pagesize: 999 })
      // --------------------------------------------------------------------
      // getRoles()默认不给参数也行,但是为了能获取到更多的数据, 就传多一点,999
      const roleRes = await getRoles({ page: 1, pagesize: 999 })
      //   console.log('roleRes', roleRes)
      this.roleList = roleRes.rows // 把获取到的数据保存中data中的roleList(存储角色列表)
      // --------------------------------------------------------------------------
      // 这是简写语法
      this.userInfo = await getMoreInfo({ id: userId })
      // console.log('userInfo', userInfo)
      // 设置选中,通过上面得打印,可以获取到服务器userInfo对象里面有roleIds
      // 所以将这个id存储到,data里面,  roles: [], // 选中的角色id
      this.roles = this.userInfo.roleIds
      this.visible = true
    }
  }
}
</script>
